<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline" :form="form" @onsubmit="onSubmit">
            <a-form-item label="样衣号">
              <a-input allow-clear style="width: 180px" placeholder="请输入样衣号" v-model="sampleCode"> </a-input>
            </a-form-item>
            <a-form-item label="款号">
              <a-input allow-clear style="width: 180px" placeholder="请输入款号" v-model="styleId"> </a-input>
            </a-form-item>
            <a-form-item label="上货季">
              <a-input allow-clear style="width: 180px" placeholder="请输入上货季" v-model="season"> </a-input>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit"> 搜索 </a-button>
              <a-button type="primary" style="margin-left: 10px"> 新增 </a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <a-card class="table">
      <a-table :loading="loading" :columns="tableColumns" :data-source="plushFillBill" :pagination="pagination" row-key="record => record.billNo" @change="onChange">
        <template slot="action" slot-scope="txt, record">
          <a style="margin: 5px" class="mr-10" @click="todetail(record)"> <a-icon type="sync" />查看 </a>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const tableColumns = [
  {
    title: '单号',
    dataIndex: 'billNo'
  },
  {
    title: '单据状态',
    dataIndex: 'billFlag'
  },
  {
    title: '样衣号',
    dataIndex: 'sampleCode'
  },
  {
    title: '款号',
    dataIndex: 'styleId'
  },
  {
    title: '品名',
    dataIndex: 'sampleName'
  },
  {
    title: '上货季',
    dataIndex: 'season'
  },
  {
    title: '创建时间',
    dataIndex: 'createDate'
  },
  {
    title: '业务审核时间',
    dataIndex: 'audDateYwy'
  },
  {
    title: '业务审核人',
    dataIndex: 'auder'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    fixed: 'right',
    align: 'center'
  }
]

export default {
  components: {},
  data() {
    return {
      loading: false,
      form: this.$form.createForm(this),
      plushFillBill: [],
      tableColumns,
      sampleCode: '',
      styleId: '',
      season: '',
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  mounted() {
    sessionStorage.removeItem('current')
    this.loadData()
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  methods: {
    loadData(key) {
      if (sessionStorage.getItem('current')) {
        this.pagination.current = Number(sessionStorage.getItem('current'))
      }
      this.loading = true
      if (key) {
        this.pagination.current = key
      }
      const params = {
        current: this.pagination.current,
        size: this.pagination.pageSize
      }
      if (this.sampleCode) {
        params.sampleCode = this.sampleCode
      }
      if (this.styleId) {
        params.styleId = this.styleId
      }
      if (this.season) {
        params.season = this.season
      }
      try {
        const res = {
          code: 200,
          success: true,
          data: {
            records: [
              {
                billNo: '202304250001',
                billFlag: 0,
                sampleCode: 'T08N29',
                styleId: '1M9C11950',
                sampleName: '',
                season: '2023秋冬',
                createDate: '2023/4/25',
                auderDate: '',
                auder: ''
              },
              {
                billNo: '202304250002',
                billFlag: 1,
                sampleCode: 'T08N30',
                styleId: '1M9C11951',
                sampleName: '',
                season: '2023秋冬',
                createDate: '2023/4/25',
                auderDate: '2023/4/25',
                auder: '李贝'
              },
              {
                billNo: '202304230001',
                billFlag: 2,
                sampleCode: 'T08N28',
                styleId: '1M9C11952',
                sampleName: '',
                season: '2023秋冬',
                createDate: '2023/4/25',
                auderDate: '2023/4/25',
                auder: '李贝'
              }
            ],
            total: 3,
            size: 10,
            current: 1
            },
          msg: '操作成功!'
        }
        if (res.code == 200) {
          this.plushFillBill = res.data.records
          this.pagination.total = res.data.total
          console.log(this.plushFillBill)
        } else {
          if (res.msg) {
            this.$message.warning(res.msg)
          } else {
            this.$message.warning('获取单据失败!')
          }
        }
      } catch (error) {
        this.$message.warning('获取单据失败!')
      } finally {
        this.loading = false
      }
    },
    onSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    onChange(pagination) {
      this.pagination = pagination
      sessionStorage.setItem('current', this.pagination.current)
      this.loadData()
    },
    todetail(record) {
      this.$router.push({ path: '/plushFill/detail', query: { sampleCode: record.sampleCode } })
    }
  }
}
</script>

<style>
.background {
  background: transparent;
}
</style>